<template>
  <div class="result-matching-page">
    <!-- 搜索结果页面 -->
    <div v-if="isSearchMode" class="search-results-page">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <span>检索</span>
        <span class="separator">></span>
        <span>{{ searchTypeLabel }}检索结果</span>
      </div>

      <!-- 搜索结果统计 -->
      <div class="search-summary">
        <div class="summary-text">
          在所有数据库中，找到 <span class="highlight">{{ totalResults.toLocaleString() }}</span> 条结果：
        </div>
        <div class="search-term">
          <span class="term-box">(主题={{ searchQuery }})</span>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="content-area">
        <!-- 左侧筛选区域 -->
        <div class="filters-sidebar">
          <div class="filter-section">
            <div class="filter-title">
              在检索结果中精炼
              <button class="clear-btn" @click="clearFilters">清空</button>
            </div>
          </div>

          <!-- 出版年份筛选 -->
          <div class="filter-group">
            <div class="filter-header">
              <h3>出版年份</h3>
              <button class="expand-btn" @click="yearExpanded = !yearExpanded">
                {{ yearExpanded ? '︿' : '﹀' }}
              </button>
            </div>
            <div v-show="yearExpanded" class="filter-options">
              <div v-for="year in yearOptions" :key="year.year" class="filter-option">
                <label>
                  <input type="checkbox" v-model="year.checked" />
                  {{ year.year }}
                </label>
                <span class="count">{{ year.count.toLocaleString() }}</span>
              </div>
            </div>
            <button 
              v-show="yearExpanded && hasMoreYears" 
              class="expand-more"
              @click="expandMoreYears"
            >
              展开 ∨
            </button>
          </div>

          <!-- 内部成果筛选 -->
          <div class="filter-group">
            <div class="filter-header">
              <h3>内部成果</h3>
              <button class="expand-btn" @click="internalContentExpanded = !internalContentExpanded">
                {{ internalContentExpanded ? '︿' : '﹀' }}
              </button>
            </div>
            <div v-show="internalContentExpanded" class="filter-options">
              <div v-for="content in contentOptions" :key="content.type" class="filter-option">
                <label>
                  <input type="checkbox" v-model="content.checked" />
                  {{ content.type }}
                </label>
              </div>
            </div>
          </div>

          <!-- 外部成果筛选 -->
          <div class="filter-group">
            <div class="filter-header">
              <h3>外部成果</h3>
              <button class="expand-btn" @click="externalContentExpanded = !externalContentExpanded">
                {{ externalContentExpanded ? '︿' : '﹀' }}
              </button>
            </div>
            <div v-show="externalContentExpanded" class="filter-options">
              <div v-for="content in externalContentOptions" :key="content.type" class="filter-option">
                <label>
                  <input type="checkbox" v-model="content.checked" />
                  {{ content.type }}
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧结果列表 -->
        <div class="results-area">
          <div class="results-header">
            <span class="total-count">共{{ filteredResults.length.toLocaleString() }}条</span>
          </div>

          <!-- 结果列表 -->
          <div class="results-list">
            <div v-for="(result, index) in filteredResults" :key="result.id" class="result-item">
              <div class="result-number">{{ index + 1 }}</div>
              <div class="result-content">
                <h3 class="result-title">
                  <span class="highlight-term">{{ searchType }}</span>
                  {{ result.title }}
                </h3>
                <div class="result-authors">{{ result.authors }}</div>
                <div class="result-meta">
                  <span class="article-type">{{ result.type }}</span>
                  <span class="separator">|</span>
                  <span class="year">{{ result.year }}</span>
                  <span class="separator">|</span>
                  <span class="journal">{{ result.journal }}</span>
                  <span class="separator">|</span>
                  <span class="volume">{{ result.volume }}</span>
                </div>
                <div class="result-abstract">
                  {{ result.isExpanded ? result.fullAbstract : result.abstract }}
                </div>
                <div class="result-actions">
                  <button 
                    class="expand-btn" 
                    @click="toggleExpand(result.id)"
                  >
                    {{ result.isExpanded ? '收起 ∨' : '展开 ∧' }}
                  </button>
                  <button 
                    v-if="result.isExternal" 
                    class="external-link-btn"
                    @click="openExternalLink(result.externalUrl)"
                  >
                    <svg viewBox="0 0 24 24" width="16" height="16">
                      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke="currentColor" stroke-width="2" fill="none"/>
                      <polyline points="15,3 21,3 21,9" stroke="currentColor" stroke-width="2" fill="none"/>
                      <line x1="10" y1="14" x2="21" y2="3" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    文章来源出处网址
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索输入页面 -->
    <div v-else class="chat-container">
      <!-- 聊天内容区域 -->
      <div class="chat-content" ref="chatContentRef">
        <div v-if="messages.length === 0" class="chat-welcome">
          <div class="welcome-avatar">
            <img src="@/assets/十一建logo/1.gif" alt="智能助手" class="avatar-gif" />
          </div>
          <div class="welcome-text">
            <h3>Hello,张三</h3>
            <p>我可以检索匹配各种成果，请把你的问题交给我！</p>
          </div>
        </div>
        
        <!-- 消息列表 -->
        <div v-for="(message, messageIndex) in messages" :key="messageIndex" class="message" :class="message.type">
          <div class="message-avatar">
            <img v-if="message.type === 'assistant'" src="@/assets/十一建logo/1.gif" alt="AI助手" class="avatar-gif" />
            <div v-else class="user-avatar">{{ getCurrentUserAvatar() }}</div>
          </div>
          <div class="message-content">
            <!-- AI消息完成标识 -->
            <div v-if="message.type === 'assistant'" class="ai-status">
              <span class="status-icon">✓</span>
              <span class="status-text">已完成思考</span>
            </div>
            <div class="message-text" v-html="getRenderedContent(message.content)"></div>
            
            <div v-if="message.type === 'assistant'" class="message-actions">
              <button @click="copyMessage(message.content)" class="action-btn" title="复制">
                <el-icon><DocumentCopy /></el-icon>
              </button>
              <button @click="downloadMessage(message.content)" class="action-btn" title="下载">
                <el-icon><Download /></el-icon>
              </button>
           <!--    <button @click="expandMessage(message)" class="action-btn" title="扩写">
                <el-icon><Plus /></el-icon>
              </button>
              <button @click="summarizeMessage(message)" class="action-btn" title="简写">
                <el-icon><Minus /></el-icon>
              </button> -->
              <button @click="regenerateMessage(messageIndex)" class="action-btn" title="重新生成">
                <el-icon><Refresh /></el-icon>
              </button>
           <!--    <button @click="translateMessage(message)" class="action-btn" title="翻译">
                <el-icon><Promotion /></el-icon>
              </button> -->
            </div>
            
            <!-- 显示消息中的文件 -->
            <div v-if="message.files && message.files.length > 0" class="message-files">
              <div v-for="file in message.files" :key="file.id" class="message-file">
                <div class="file-icon">
                  <svg v-if="isImageFile(file)" viewBox="0 0 24 24" width="14" height="14">
                    <path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" fill="currentColor"/>
                  </svg>
                  <svg v-else viewBox="0 0 24 24" width="14" height="14">
                    <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" fill="currentColor"/>
                  </svg>
                </div>
                <span class="file-name">{{ file.name }}</span>
                <span class="file-size">{{ formatFileSize(file.size) }}</span>
              </div>
            </div>
            <div class="message-time">{{ message.time }}</div>
          </div>
        </div>
        
        <!-- 打字指示器 -->
        <div v-if="isTyping" class="message assistant">
          <div class="message-avatar">
            <img src="@/assets/十一建logo/1.gif" alt="AI助手" class="avatar-gif" />
          </div>
          <div class="message-content">
            <div class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 输入区域 -->
      <div class="chat-input">
        <div class="input-container">
          <div class="input-wrapper" 
               @drop="handleDrop" 
               @dragover="handleDragOver" 
               @dragenter="handleDragEnter"
               @dragleave="handleDragLeave"
               :class="{ 'drag-over': isDragOver }"
               style="position: relative;">
            
            <!-- 文本输入区域 -->
            <div class="textarea-container">
              <textarea
                v-model="inputMessage"
                :placeholder="inputPlaceholder"
                @keyup.enter="handleEnterKey"
                @paste="handlePaste"
                @input="adjustTextareaHeight"
                ref="textareaRef"
                class="message-input"
                rows="1"
              />
            </div>
            
            <!-- 底部功能区 -->
            <div class="input-bottom">
              <div class="input-controls">
                <el-select
                  v-model="searchSource"
                  size="small"
                  class="search-source-select"
                  style="width: 130px;"
                >
                  <el-option
                    v-for="option in searchSourceOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  >
                    <span style="display: flex; align-items: center;">
                      <span style="margin-right: 6px; display: inline-flex; align-items: center;">
                        <component :is="option.icon" style="width: 14px; height: 14px;" />
                      </span>
                      {{ option.label }}
                    </span>
                  </el-option>
                </el-select>
              </div>
              
              <!-- 右侧按钮组 -->
              <div class="input-actions">
                <!-- 上传文件按钮 -->
               <!--  <button class="upload-btn" @click="triggerFileUpload" title="上传文件" style="width: 36px; height: 36px;">
                  <img src="@/assets/icon/file.svg" alt="上传文件" style="width: 36px; height: 36px; border-radius: 8px; padding: 0; display: flex; align-items: center; justify-content: center;" />
                </button> -->
                <input 
                  ref="fileInputRef"
                  type="file" 
                  multiple
                  accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png,.gif,.xlsx,.xls,.csv"
                  @change="handleFileUpload"
                  style="display: none;"
                />
                <!-- 发送按钮 -->
                <el-button
                  class="send-btn"
                  type="primary"
                  style="width: 36px; height: 36px; border-radius: 8px; padding: 0; display: flex; align-items: center; justify-content: center;"
                  @click="isTyping ? stopGeneration() : sendMessage()"
                  :disabled="!inputMessage.trim() && uploadedFiles.length === 0 && !isTyping"
                  :title="isTyping ? '停止生成' : '发送'"
                >
                  <el-icon v-if="isTyping" :size="24">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                      <path d="M6,6H18V18H6V6Z" fill="currentColor"/>
                    </svg>
                  </el-icon>
                  <el-icon v-else :size="24"><Promotion /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 已上传文件列表 -->
        <div v-if="uploadedFiles.length > 0" class="uploaded-files">
          <div v-for="file in uploadedFiles" :key="file.id" class="file-item">
            <div class="file-icon">
              <svg v-if="isImageFile(file)" viewBox="0 0 24 24" width="16" height="16">
                <path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" fill="currentColor"/>
              </svg>
              <svg v-else viewBox="0 0 24 24" width="16" height="16">
                <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" fill="currentColor"/>
              </svg>
            </div>
            <span class="file-name">{{ file.name }}</span>
            <span class="file-size">{{ formatFileSize(file.size) }}</span>
            <button class="remove-file-btn" @click="removeFile(file.id)" title="移除文件">
              <svg viewBox="0 0 24 24" width="14" height="14">
                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" fill="currentColor"/>
              </svg>
            </button>
          </div>
        </div>
        
        <!-- 底部提示 -->
        <div class="input-footer">
          <span class="footer-text">以上内容由大模型生成,请您注意甄别,并自行判断其准确性和适用性.</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElIcon, ElButton, ElSelect, ElOption, ElMessage } from 'element-plus'
import {
  DocumentCopy,
  Download,
  Refresh,
  Promotion,
  User,
  OfficeBuilding,
  Connection
} from '@element-plus/icons-vue'
import { marked } from 'marked'

const route = useRoute()
const router = useRouter()

const inputMessage = ref('')
const isTyping = ref(false)
const chatContentRef = ref<HTMLElement>()
const fileInputRef = ref<HTMLInputElement>()
const uploadedFiles = ref<UploadedFile[]>([])
const messages = ref<Message[]>([])

// 搜索来源选择
const searchSource = ref('project-name')
const searchSourceOptions = [
  { 
    value: 'project-name', 
    label: '项目名称', 
    icon: OfficeBuilding,
    placeholder: '输入具体工程项目全称/简称',
    example: '深圳湾体育中心',
    description: '检索特定建筑项目相关技术资料与解决方案'
  },
  { 
    value: 'structure-type', 
    label: '结构类型', 
    icon: Connection,
    placeholder: '输入建筑结构分类',
    example: '大跨度空间网格结构',
    description: '筛选特定结构体系的施工难点与创新技术'
  },
  { 
    value: 'key-difficulty', 
    label: '重难点摘要', 
    icon: User,
    placeholder: '输入工程核心挑战关键词',
    example: '超深基坑群塔作业',
    description: '定位类似施工难题的应对方案与案例'
  },
  { 
    value: 'tech-keyword', 
    label: '技术关键词', 
    icon: Connection,
    placeholder: '输入技术名称/缩写',
    example: 'BIM协同设计',
    description: '检索技术应用场景及实施要点'
  },
  { 
    value: 'research-result', 
    label: '研究成果名称', 
    icon: DocumentCopy,
    placeholder: '输入论文/报告标题关键词',
    example: '超高层建筑风振控制',
    description: '精准匹配相关研究文献与实验数据'
  },
  { 
    value: 'researcher', 
    label: '研究人员', 
    icon: User,
    placeholder: '输入专家姓名/机构',
    example: '王建国/东南大学',
    description: '追踪学者技术成果及合作项目'
  }
]

// 计算属性：获取当前选中的搜索类型信息
const currentSearchOption = computed(() => {
  return searchSourceOptions.find(option => option.value === searchSource.value) || searchSourceOptions[0]
})

// 计算属性：动态生成输入框提示文字
const inputPlaceholder = computed(() => {
  const option = currentSearchOption.value
  return `${option.placeholder}（示例：${option.example}）`
})

const currentTypingTimeout = ref<number | null>(null)

// 搜索模式相关状态
const isSearchMode = computed(() => {
  return route.query.q !== undefined
})

const searchQuery = ref('')
const searchType = ref('')
const searchCategory = ref('')

// Markdown 渲染函数
const getRenderedContent = (content: string): string => {
  if (!content) return ''
  try {
    const result = marked.parse(content, {
      breaks: true,
      gfm: true
    })
    return typeof result === 'string' ? result : content
  } catch (error) {
    console.error('Markdown 渲染错误:', error)
    return content
  }
}

// 搜索类型标签映射
const searchTypeLabels = {
  'project-name': '项目名称',
  'structure-type': '结构类型',
  'key-difficulty': '重难点摘要',
  'tech-keyword': '技术关键词',
  'research-result': '研究成果名称',
  'researcher': '研究人员'
}

const searchTypeLabel = computed(() => {
  return searchTypeLabels[searchCategory.value as keyof typeof searchTypeLabels] || '文献'
})

// 搜索结果数据
const totalResults = ref(10325)

const allYearOptions = ref([
  { year: 2025, count: 549, checked: false },
  { year: 2024, count: 1033, checked: false },
  { year: 2023, count: 946, checked: false },
  { year: 2022, count: 887, checked: false },
  { year: 2021, count: 621, checked: false },
  { year: 2020, count: 543, checked: false },
  { year: 2019, count: 456, checked: false },
  { year: 2018, count: 398, checked: false },
  { year: 2017, count: 321, checked: false },
  { year: 2016, count: 287, checked: false },
  { year: 2015, count: 234, checked: false },
  { year: 2014, count: 198, checked: false },
  { year: 2013, count: 156, checked: false },
  { year: 2012, count: 123, checked: false },
  { year: 2011, count: 98, checked: false }
])

// 控制显示的年份数量
const yearDisplayLimit = ref(5)
const yearOptions = computed(() => {
  return allYearOptions.value.slice(0, yearDisplayLimit.value)
})

// 是否还有更多年份
const hasMoreYears = computed(() => {
  return yearDisplayLimit.value < allYearOptions.value.length
})

const contentOptions = ref([
  { type: '工法', checked: false },
  { type: '专利', checked: false },
  { type: '论文', checked: false }
])

const externalContentOptions = ref([
  { type: '外部论文', checked: false },
  { type: '外部专利', checked: false },
  { type: '外部标准', checked: false }
])

// 展开收起状态
const yearExpanded = ref(true)
const internalContentExpanded = ref(true)
const externalContentExpanded = ref(true)

const results = ref([
  {
    id: 1,
    title: ' ontology for information management (BIM-OIM)',
    authors: 'Abanda, FH; Akintola, A; Tuhaise, VV; Tah, JHM',
    type: 'Article',
    year: '2025',
    journal: 'Journal of Building Engineering',
    volume: '107, No.112762',
    abstract: 'The adoption of Building Information Modelling (BIM) in the construction industry has grown significantly. Despite this growth of its concepts, protocols, and the intricate interplay between processes, people, and technology, standardized guidelines have been developed, most notably the ISO 19650 series, which establishes a framework for managing information throughout the lifecycle of a built asset using BIM. However, there are still gaps in understanding how to effectively implement and utilize these standards in practice.',
    fullAbstract: 'The adoption of Building Information Modelling (BIM) in the construction industry has grown significantly. Despite this growth of its concepts, protocols, and the intricate interplay between processes, people, and technology, standardized guidelines have been developed, most notably the ISO 19650 series, which establishes a framework for managing information throughout the lifecycle of a built asset using BIM. However, there are still gaps in understanding how to effectively implement and utilize these standards in practice. This paper presents a comprehensive ontology for BIM-based information management (BIM-OIM) that provides a structured approach to organizing and managing construction information. The proposed ontology addresses key challenges in information interoperability, data standardization, and knowledge representation within the BIM ecosystem.',
    isExternal: true,
    externalUrl: 'https://www.sciencedirect.com/science/article/pii/S2352710224011234',
    isExpanded: false,
    categories: ['工法', '论文'],
    yearCategory: 2025
  },
  {
    id: 2,
    title: ' Cloud Score: Benchmarking BIM Performance',
    authors: 'Du, J; Liu, R; Issa, RRA',
    type: 'Article',
    year: '2014',
    journal: 'Journal of Construction Engineering and Management',
    volume: '140, No.04014',
    abstract: 'A variety of building information modeling (BIM) performance evaluation initiatives have been developed. These initiatives were designed for evaluating, instead of benchmarking, and...',
    fullAbstract: 'A variety of building information modeling (BIM) performance evaluation initiatives have been developed. These initiatives were designed for evaluating, instead of benchmarking, and most lack the capability to provide comparative performance analytics. This paper introduces the BIM Cloud Score, a comprehensive benchmarking framework for assessing BIM performance across different projects and organizations.',
    isExternal: false,
    externalUrl: null,
    isExpanded: false,
    categories: ['专利', '论文'],
    yearCategory: 2014
  }
])

// 计算过滤后的结果
const filteredResults = computed(() => {
  return results.value.filter(result => {
    // 年份筛选
    const selectedYears = allYearOptions.value.filter(year => year.checked).map(year => year.year)
    if (selectedYears.length > 0 && !selectedYears.includes(result.yearCategory)) {
      return false
    }
    
    // 内部成果筛选
    const selectedInternalContents = contentOptions.value.filter(content => content.checked).map(content => content.type)
    const selectedExternalContents = externalContentOptions.value.filter(content => content.checked).map(content => content.type)
    const allSelectedContents = [...selectedInternalContents, ...selectedExternalContents]
    
    if (allSelectedContents.length > 0 && !allSelectedContents.some(type => result.categories.includes(type))) {
      return false
    }
    
    return true
  })
})

interface Message {
  type: 'user' | 'assistant'
  content: string
  time: string
  files?: UploadedFile[]
}



interface UploadedFile {
  id: string
  name: string
  size: number
  type: string
  file: File
}

function triggerFileUpload() {
  fileInputRef.value?.click()
}

function handleFileUpload(event: Event) {
  const target = event.target as HTMLInputElement
  const files = target.files
  
  if (files) {
    Array.from(files).forEach(file => {
      addFileToUpload(file)
    })
  }
  
  // 清空文件输入框
  if (target) {
    target.value = ''
  }
}

function removeFile(fileId: string) {
  const index = uploadedFiles.value.findIndex(file => file.id === fileId)
  if (index > -1) {
    uploadedFiles.value.splice(index, 1)
  }
}

function isImageFile(file: UploadedFile): boolean {
  return file.type.startsWith('image/')
}

function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
}

function getCurrentTime() {
  return new Date().toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
}

function scrollToBottom() {
  nextTick(() => {
    if (chatContentRef.value) {
      chatContentRef.value.scrollTop = chatContentRef.value.scrollHeight
    }
  })
}



// 处理回车键事件
function handleEnterKey(event: KeyboardEvent) {
  // 如果正在生成，阻止回车发送
  if (isTyping.value) {
    event.preventDefault()
    return
  }
  
  // 正常发送逻辑
  sendMessage()
}

function sendMessage() {
  if ((!inputMessage.value.trim() && uploadedFiles.value.length === 0) || isTyping.value) return

  const question = inputMessage.value.trim()
  if (!question) return

  // 跳转到搜索结果页面，通过query参数传递搜索信息
  const queryParams = {
    q: question,
    type: question.includes('BIM') ? 'BIM' : question,
    category: searchSource.value
  }

  router.push({
    path: route.path,
    query: queryParams
  })
}



// 添加拖拽和粘贴相关状态
const isDragOver = ref(false)

// 处理粘贴事件
function handlePaste(event: ClipboardEvent) {
  const items = event.clipboardData?.items
  if (!items) return
  
  for (let i = 0; i < items.length; i++) {
    const item = items[i]
    
    // 处理图片粘贴
    if (item.type.indexOf('image') !== -1) {
      event.preventDefault()
      const file = item.getAsFile()
      if (file) {
        addFileToUpload(file)
        inputMessage.value = inputMessage.value + `[已粘贴图片: ${file.name || 'image.png'}] `
      }
    }
    
    // 处理文本粘贴（可能包含表格数据）
    if (item.type === 'text/plain') {
      item.getAsString((text) => {
        // 检测是否为表格数据（制表符分隔或逗号分隔）
        if (isTableData(text)) {
          createTableFile(text)
        }
      })
    }
    
    // 处理HTML粘贴（从Excel等复制的表格）
    if (item.type === 'text/html') {
      item.getAsString((html) => {
        const tableData = extractTableFromHTML(html)
        if (tableData) {
          createTableFile(tableData)
        }
      })
    }
  }
}

// 处理拖拽进入
function handleDragEnter(event: DragEvent) {
  event.preventDefault()
  isDragOver.value = true
}

// 处理拖拽悬停
function handleDragOver(event: DragEvent) {
  event.preventDefault()
}

// 处理拖拽离开
function handleDragLeave(event: DragEvent) {
  event.preventDefault()
  // 检查是否真的离开了拖拽区域
  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
  const x = event.clientX
  const y = event.clientY
  
  if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
    isDragOver.value = false
  }
}

// 处理文件拖拽放置
function handleDrop(event: DragEvent) {
  event.preventDefault()
  isDragOver.value = false
  
  const files = event.dataTransfer?.files
  if (files) {
    Array.from(files).forEach(file => {
      addFileToUpload(file)
    })
    
    if (files.length > 0) {
      inputMessage.value = inputMessage.value + `[已拖拽 ${files.length} 个文件] `
    }
  }
}

// 添加文件到上传列表
function addFileToUpload(file: File) {
  const uploadedFile: UploadedFile = {
    id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
    name: file.name,
    size: file.size,
    type: file.type,
    file: file
  }
  uploadedFiles.value.push(uploadedFile)
}

// 检测是否为表格数据
function isTableData(text: string): boolean {
  const lines = text.split('\n').filter(line => line.trim())
  if (lines.length < 2) return false
  
  // 检查是否有制表符或多个逗号分隔
  const hasTabSeparator = lines.some(line => line.includes('\t'))
  const hasCommaSeparator = lines.some(line => (line.match(/,/g) || []).length >= 2)
  
  return hasTabSeparator || hasCommaSeparator
}

// 从HTML中提取表格数据
function extractTableFromHTML(html: string): string | null {
  const parser = new DOMParser()
  const doc = parser.parseFromString(html, 'text/html')
  const table = doc.querySelector('table')
  
  if (!table) return null
  
  const rows = table.querySelectorAll('tr')
  const tableData: string[] = []
  
  rows.forEach(row => {
    const cells = row.querySelectorAll('td, th')
    const rowData = Array.from(cells).map(cell => cell.textContent?.trim() || '')
    tableData.push(rowData.join('\t'))
  })
  
  return tableData.join('\n')
}

// 创建表格文件
function createTableFile(tableData: string) {
  const blob = new Blob([tableData], { type: 'text/plain' })
  const file = new File([blob], `table_${Date.now()}.txt`, { type: 'text/plain' })
  addFileToUpload(file)
  inputMessage.value = inputMessage.value + `[已粘贴表格数据] `
}

const textareaRef = ref<HTMLTextAreaElement>()

// 停止生成功能
const stopGeneration = () => {
  if (isTyping.value && currentTypingTimeout.value) {
    clearTimeout(currentTypingTimeout.value)
    isTyping.value = false
    currentTypingTimeout.value = null
    // 可以添加消息提示
    console.log('已停止生成')
  }
}

function adjustTextareaHeight() {
  if (textareaRef.value) {
    // 重置高度以获取正确的scrollHeight
    textareaRef.value.style.height = 'auto'
    
    // 计算新高度，最小40px，最大120px
    const minHeight = 40
    const maxHeight = 120
    const scrollHeight = textareaRef.value.scrollHeight
    
    if (scrollHeight <= maxHeight) {
      textareaRef.value.style.height = Math.max(scrollHeight, minHeight) + 'px'
    } else {
      textareaRef.value.style.height = maxHeight + 'px'
    }
  }
}

// 展开更多年份
function expandMoreYears() {
  const currentLimit = yearDisplayLimit.value
  const increment = 5 // 每次展开5个
  const maxLimit = allYearOptions.value.length
  
  yearDisplayLimit.value = Math.min(currentLimit + increment, maxLimit)
}

// 清空筛选条件
function clearFilters() {
  allYearOptions.value.forEach(year => year.checked = false)
  contentOptions.value.forEach(content => content.checked = false)
  externalContentOptions.value.forEach(content => content.checked = false)
  // 重置年份显示限制
  yearDisplayLimit.value = 5
}

// 展开/收起摘要
function toggleExpand(resultId: number) {
  const result = results.value.find(r => r.id === resultId)
  if (result) {
    result.isExpanded = !result.isExpanded
  }
}

// 打开外部链接
function openExternalLink(url: string | null) {
  if (url) {
    window.open(url, '_blank')
  }
}

// 初始化搜索参数
function initSearchParams() {
  searchQuery.value = route.query.q as string || ''
  searchType.value = route.query.type as string || ''
  searchCategory.value = route.query.category as string || 'project-name'
}

// 组件挂载时初始化
onMounted(() => {
  initSearchParams()
  nextTick(() => {
    adjustTextareaHeight()
  })
})

// 监听输入内容变化
watch(inputMessage, () => {
  nextTick(() => {
    adjustTextareaHeight()
  })
})

// 监听路由变化
watch(() => route.query, () => {
  initSearchParams()
}, { immediate: true })

// 获取当前用户头像文字
function getCurrentUserAvatar(): string {
  const currentUsername = localStorage.getItem('currentUsername')
  if (currentUsername) {
    return currentUsername.charAt(0).toUpperCase()
  }
  
  const userRole = localStorage.getItem('userRole') || 'user'
  switch (userRole) {
    case 'admin':
      return '管'
    case 'staff':
      return '员'
    default:
      return '用'
  }
}

// 复制消息
function copyMessage(content: string) {
  const textContent = content.replace(/<[^>]*>/g, '') // 移除HTML标签
  navigator.clipboard.writeText(textContent).then(() => {
    ElMessage.success('复制成功')
  })
}

// 下载消息
function downloadMessage(content: string) {
  const textContent = content.replace(/<[^>]*>/g, '')
  const blob = new Blob([textContent], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `message_${Date.now()}.txt`
  a.click()
  URL.revokeObjectURL(url)
}



// 重新生成消息
const regenerateMessage = (messageIndex: number) => {
  console.log('重新生成被点击了，索引:', messageIndex)
  
  if (messageIndex > 0) {
    const previousMessage = messages.value[messageIndex - 1]
    if (previousMessage.type === 'user') {
      console.log('找到用户消息，开始重新生成')
      
      // 移除当前AI消息
      messages.value.splice(messageIndex, 1)
      
      // 模拟重新生成AI回复
      isTyping.value = true
      
      const typingTimeout = setTimeout(() => {
        if (isTyping.value) {
          const responses = [
            '<p>重新生成的回答：我已经收到您的图表查询请求，正在重新分析中...</p>',
            '<p>基于您的问题，我重新为您整理了以下信息...</p>',
            '<p>重新分析后，为您提供更准确的回答...</p>'
          ]

          const newAssistantMessage: Message = {
            type: 'assistant',
            content: responses[Math.floor(Math.random() * responses.length)],
            time: getCurrentTime()
          }

          messages.value.push(newAssistantMessage)
          isTyping.value = false
          scrollToBottom()
        }
      }, 2000)

      currentTypingTimeout.value = typingTimeout
      scrollToBottom()
    }
  }
}


</script>

<style scoped>
.chat-header {
  padding: 1rem 3rem 1.5rem 3rem;
  background: var(--minimal-bg);
  border-bottom: 1px solid rgba(91, 124, 255, 0.08);
}

.section-title {
  display: flex;
  align-items: center;
  margin: 0;
}
.title-bar {
  width: 4px;
  height: 20px;
  background: var(--minimal-primary-gradient);
  border-radius: 2px;
  margin-right: 12px;
}

.chart-query-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-container {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.chat-content {
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}

.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: 60px 20px;
  min-height: 400px;
}

.welcome-avatar {
  margin-bottom: 30px;
}

.avatar-gif {
  width: 120px;
  height: 120px;

  object-fit: cover;
  border-radius: 24px;
opacity: 1;
  box-shadow: 0px 0px 20px 0px rgba(164, 133, 255, 0.5);
}

.welcome-text h3 {
  font-size: 24px;
  font-weight: 500;
  color: #323742;
  margin: 0 0 20px 0;
  font-family: Source Han Sans;
}

.welcome-text p {
  letter-spacing: 0px;
  font-variation-settings: "opsz" auto;
font-feature-settings: "kern" on;
  font-size: 16px;
  color: #323742;
  line-height: 1.6;
  margin: 0 0 10px 0;
  line-height: 32px;
  font-family: Source Han Sans;
}

.sub-text {
  font-size: 14px !important;
  color: #999 !important;
}

.message {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
  width: 100%;
}

.message.user {
  flex-direction: row-reverse;
  /* 确保用户消息从右侧开始排列 */
}



.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 12px;
  flex-shrink: 0;
}

.message-avatar .avatar-gif {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar {
  background: var(--minimal-primary-gradient);
  color: white;
  font-weight: 600;
  font-size: 14px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-content {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: none;
  overflow: visible;
  /* 自适应宽度，但不设置flex: 1 */
  width: fit-content;
  max-width: 80%;
  min-width: 60px;
}

/* 用户消息内容右对齐 */
.message.user .message-content {
  align-items: flex-end;
}

/* AI消息内容左对齐 */
.message.assistant .message-content {
  align-items: flex-start;
}

.message-text {
  padding: 16px 20px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.6;
  word-wrap: break-word;
  margin-bottom: 6px;
  width: fit-content;
  min-width: 40px;
}

/* 用户消息样式 */
.message.user .message-text {
  background: var(--minimal-primary-gradient);
  color: white;
  border-bottom-right-radius: 6px;
}

/* AI消息样式 */
.message.assistant .message-text {
  background: #f1f3f5;
  color: #333;
  border-bottom-left-radius: 6px;
}

.message-time {
  font-size: 11px;
  color: #999;
  margin-top: 6px;
  padding: 0 4px;
  opacity: 0.8;
}

.message.user .message-time {
  text-align: right;
  color: #999;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

.chat-input {
width: 100%;
  padding: 16px 0px;
  margin: auto;
}

.input-container {
  position: relative;
}

.input-wrapper {
  display: flex;
  align-items: stretch;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 0;
  transition: all 0.2s ease;
  min-height: 64px;
  font-size: 16px;
  position: relative;
  flex-direction: column;
}

.input-wrapper:hover {
  border-color: #40a9ff;
}

.input-wrapper:focus-within {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.input-wrapper.drag-over {
  background: rgba(24, 144, 255, 0.05);
  border-color: #1890ff;
  border-style: dashed;
}
:deep(.el-select--small .el-select__wrapper){
  width:100%;
}

/* 文本输入容器 */
.textarea-container {
  flex: 1;
  display: flex;
}

.message-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 16px;
  color: #333;
  line-height: 1.5;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  overflow-y: auto;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  box-sizing: border-box;
}

.message-input::placeholder {
  color: #bfbfbf;
}

/* 底部功能区 */
.input-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.input-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f5f5f5;
  color: #666;
}

.action-btn:hover {
  background: #e6f7ff;
  color: #1890ff;
}

.upload-btn, .send-btn {
  padding: 8px 12px;
  border: 1px solid #e9ecef;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-size-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #666;
}

.size-text {
  white-space: nowrap;
}

.size-select {
  border: none;
  background: transparent;
  color: #666;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  padding: 2px 4px;
}

.size-select:hover {
  background: #f0f0f0;
  border-radius: 4px;
}

.send-btn {
  background:var(--minimal-primary-gradient);
  color: white;
  border-radius: 6px;
  margin-left: auto;
}

.send-btn:hover:not(:disabled) {
  background:var(--minimal-primary-gradient);
}

.send-btn:disabled {
  background: #f5f5f5;
  color: #bfbfbf;
  cursor: not-allowed;
}

.uploaded-files {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.file-item {
  display: flex;
  align-items: center;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #666;
  gap: 6px;
}

.file-icon {
  color: #1890ff;
}

.file-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  color: #999;
  font-size: 11px;
}

.remove-file-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 2px;
  border-radius: 2px;
  transition: all 0.2s ease;
}

.remove-file-btn:hover {
  background: #f5f5f5;
  color: #ff4d4f;
}

.input-footer {
  margin-top: 12px;
  text-align: center;
}

.footer-text {
  font-size: 12px;
  color: #999;
}

.message-files {
  margin-top: 8px;
}

.message-file {
  display: flex;
  align-items: center;
  background: #fafafa;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  color: #666;
  gap: 6px;
  margin-bottom: 4px;
}

.message.user .message-file {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.input-advanced {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 14px;
  color: #666;
}
.web-search-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.model-select {
  display: flex;
  align-items: center;
  gap: 6px;
}
.model-select select {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 14px;
  outline: none;
  transition: border 0.2s;
}
.model-select select:focus {
  border-color: #1890ff;
}
/* 框内左下角功能区 */
.input-advanced-inside {
  position: absolute;
  left: 16px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: #888;
  z-index: 2;
  background: transparent;
  pointer-events: auto;
}
.input-advanced-inside .web-search-btn {
  /* background: var(--minimal-primary-gradient); */
  min-width: 88px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  box-shadow: none;
  border: 1px solid #e0e0e0;
  margin-right: 0;
  padding: 0 12px;
}
/* 移除下方这段会覆盖主色的规则 */
/* :deep(.input-advanced-inside .el-button.is-primary) {
  background: #1890ff;
  color: #fff;
  border-color: #1890ff;
  box-shadow: none;
} */
:deep(.input-advanced-inside .el-button.is-primary:focus),
:deep(.input-advanced-inside .el-button.is-primary:active) {
  border-color: #1890ff !important;
  box-shadow: none !important;
}
.input-advanced-inside .model-select {
  min-width: 100px;
}
.model-select-popper {
  font-size: 13px;
}
.input-advanced-inside .switch-label {
  margin-left: 2px;
}
.input-advanced-inside .model-select {
  display: flex;
  align-items: center;
  gap: 4px;
}
.input-advanced-inside select {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  outline: none;
  background: #fafbfc;
  color: #333;
  transition: border 0.2s;
}
.input-advanced-inside select:focus {
  border-color: #1890ff;
}
@media (max-width: 600px) {
  .input-advanced-inside {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    left: 8px;
    bottom: 8px;
  }
}
.message-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  opacity: 1;
}

.message-actions .action-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.message-actions .action-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.message-actions .action-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--el-color-primary);
}
</style>

<!-- 新增全局样式，确保渐变主色全局覆盖 -->
<style>
/* 最高优先级的样式覆盖 */
:deep(.el-button--primary) {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  background-image: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-button--primary:hover),
:deep(.el-button--primary:focus),
:deep(.el-button--primary:active) {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  background-image: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* 专门针对联网搜索按钮 */
.web-search-btn.el-button--primary {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  background-image: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

.web-search-btn.el-button--primary:hover,
.web-search-btn.el-button--primary:focus,
.web-search-btn.el-button--primary:active {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  background-image: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* 输入框内的按钮 */
:deep(.input-advanced-inside .el-button--primary) {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  background-image: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.input-advanced-inside .el-button--primary:hover),
:deep(.input-advanced-inside .el-button--primary:focus),
:deep(.input-advanced-inside .el-button--primary:active) {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  background-image: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

.ai-status {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(91, 124, 255, 0.08);
  color: #5b7cff;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  margin-bottom: 12px;
  width: fit-content;
  border: 1px solid rgba(91, 124, 255, 0.15);
}

.status-icon {
  font-size: 10px;
  font-weight: bold;
}

.status-text {
  font-weight: 500;
}

/* 添加消息样式类 */
.message-bold {
  font-weight: 600;
  color: var(--el-color-primary);
}

.message-list-item {
  display: flex;
  align-items: flex-start;
  margin: 8px 0;
  line-height: 1.6;
}

.message-unordered-item .message-list-bullet {
  color: var(--el-color-primary);
  font-weight: bold;
  margin-right: 8px;
  min-width: 16px;
}

.message-list-content {
  flex: 1;
}

.message-quote {
  border-left: 4px solid var(--el-color-primary);
  padding: 12px 16px;
  margin: 12px 0;
  background: var(--el-color-primary-light-9);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

/* 搜索来源下拉框样式 */
.search-source-select {
  border-radius: 6px;
  font-size: 12px;
}

.search-source-select .el-input__inner {
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  border-radius: 6px;
}

.search-source-select .el-input__suffix {
  height: 28px;
  line-height: 28px;
}

.search-source-select .el-select__caret {
  line-height: 28px;
}

/* 搜索结果页面样式 */
.result-matching-page {
  height: 100%;
  overflow: hidden;
  background: var(--minimal-bg, #f5f7fa);
}

.search-results-page {
  padding: 24px;
  background: var(--minimal-bg, #f5f7fa);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.breadcrumb {
  font-size: 14px;
  color: #8b949e;
  margin-bottom: 24px;
  font-weight: 400;
  flex-shrink: 0;
}

.breadcrumb .separator {
  margin: 0 8px;
  color: #d0d7de;
}

.search-summary {
  background: white;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(91, 124, 255, 0.08);
  border: 1px solid rgba(91, 124, 255, 0.06);
  flex-shrink: 0;
}

.summary-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.search-summary .highlight {
  color: #5b7cff;
  font-weight: bold;
}

.search-term {
  margin-top: 10px;
}

.term-box {
  background: rgba(91, 124, 255, 0.1);
  color: #5b7cff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.content-area {
  display: flex;
  gap: 20px;
  height: calc(100vh - 240px);
  min-height: 600px;
}

.filters-sidebar {
  width: 300px;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(91, 124, 255, 0.08);
  border: 1px solid rgba(91, 124, 255, 0.06);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
}

.filter-section {
  margin-bottom: 24px;
}

.filter-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #323742;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.clear-btn {
  color: #5b7cff;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.clear-btn:hover {
  background: rgba(91, 124, 255, 0.08);
}

.filter-group {
  margin-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.filter-group:last-child {
  border-bottom: none;
  padding-bottom: 40px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.filter-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: #323742;
  margin: 0;
}

.filter-header .expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #8b949e;
  font-size: 16px;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.filter-header .expand-btn:hover {
  color: #5b7cff;
  background: rgba(91, 124, 255, 0.08);
}

.filter-options {
  margin-bottom: 12px;
}

.filter-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.filter-option:hover {
  background: rgba(91, 124, 255, 0.04);
}

.filter-option label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #323742;
  font-weight: 400;
  flex: 1;
}

.filter-option input[type="checkbox"] {
  margin-right: 12px;
  width: 16px;
  height: 16px;
  accent-color: #5b7cff;
}

.count {
  color: #8b949e;
  font-size: 13px;
  font-weight: 500;
  background: #f6f8fa;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

.expand-more {
  color: #5b7cff;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin-top: 8px;
  font-weight: 500;
}

.expand-more:hover {
  background: rgba(91, 124, 255, 0.08);
}

.results-area {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(91, 124, 255, 0.08);
  border: 1px solid rgba(91, 124, 255, 0.06);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.results-header {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 16px;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.total-count {
  font-size: 16px;
  color: #323742;
  font-weight: 600;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 1;
  padding-bottom: 40px;
}

.result-item {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 24px;
  transition: all 0.2s ease;
}

.result-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.result-item:hover {
  background: rgba(91, 124, 255, 0.02);
  border-radius: 8px;
  padding: 16px;
  margin: -16px;
  border-bottom: 1px solid #f0f0f0;
}

.result-item:hover:last-child {
  border-bottom: none;
}

.result-number {
  font-size: 18px;
  font-weight: 700;
  color: #5b7cff;
  margin-right: 24px;
  margin-top: 4px;
  min-width: 24px;
}

.result-content {
  flex: 1;
}

.result-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.highlight-term {
  background: rgba(91, 124, 255, 0.15);
  color: #5b7cff;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.result-authors {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.article-type {
  color: #333;
}

.result-meta .separator {
  color: #ccc;
}

.journal {
  color: #5b7cff;
}

.author-btn, .publish-btn {
  background: #fff566;
  border: none;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
}

.result-abstract {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.result-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.result-actions .expand-btn {
  color: #5b7cff;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.result-actions .expand-btn:hover {
  background: rgba(91, 124, 255, 0.08);
}

.external-link-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #5b7cff 0%, #a685ff 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(91, 124, 255, 0.2);
}

.external-link-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(91, 124, 255, 0.3);
  background: linear-gradient(135deg, #4a6bef 0%, #9c79f0 100%);
}

.external-link-btn svg {
  width: 16px;
  height: 16px;
}

.external-notice {
  color: #8b949e;
  font-size: 12px;
  background: rgba(139, 148, 158, 0.08);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(139, 148, 158, 0.2);
  font-weight: 500;
}

/* 自定义滚动条样式 */
.filters-sidebar::-webkit-scrollbar,
.results-area::-webkit-scrollbar {
  width: 6px;
}

.filters-sidebar::-webkit-scrollbar-track,
.results-area::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.filters-sidebar::-webkit-scrollbar-thumb,
.results-area::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.filters-sidebar::-webkit-scrollbar-thumb:hover,
.results-area::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 输入页面保持原有样式 */
.chart-query-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>










































